<template>
    <div class="app-container">
        <a-card>
            <BasicTable ref="tableRef" :params="params" :columns="columns" :selectbox="false" :query="query">
                <template #form>
                    <a-form-item label="故障状态" name="status">
                        <a-select v-model:value="params.status" :options="options" placeholder="请选择故障状态" />
                    </a-form-item>
                    <a-form-item class="date-form-item" label="故障时间" name="time">
                        <a-range-picker v-model:value="params.time" show-time />
                    </a-form-item>
                </template>
                <template #button>
                    <a-button type="primary" @click="onDownload">
                        <template #icon>
                            <download-outlined />
                        </template>
                        下载
                    </a-button>
                </template>
                <template #table="{ body }">
                    <template v-if="body.column.key === 'status'">
                        <a-tag v-if="body.record.status === 2" color="processing">已恢复</a-tag>
                        <a-tag v-if="body.record.status === 1" color="error">进行中</a-tag>
                    </template>
                    <template v-if="body.column.key === 'endTime'">
                        {{ body.record.endTime || '--' }}
                    </template>
                </template>
            </BasicTable>
        </a-card>
    </div>
</template>
<script setup name="AccidentModule">
import { reactive, ref } from 'vue'
import { query, download } from '/@/api/Inverter/Accident'
import { DownloadOutlined } from '@ant-design/icons-vue'
import { BasicTable } from '@iframe/tools/components'

const tableRef = ref()
const options = [
    {
        label: '全部',
        value: null
    },
    {
        label: '进行中',
        value: 1
    },
    {
        label: '已恢复',
        value: 2
    }
]

const params = reactive({
    status: null,
    time: null
})
const columns = [
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        width: 150
    },
    {
        title: '电站名称',
        dataIndex: 'stationName',
        key: 'stationName',
        width: 180
    },
    {
        title: '设备序号',
        dataIndex: 'no',
        key: 'no',
        width: 100,
        align: 'center'
    },
    {
        title: '设备编码',
        dataIndex: 'code',
        key: 'code',
        width: 120,
        align: 'center'
    },
    {
        title: '告警代码',
        dataIndex: 'errorCode',
        key: 'errorCode',
        width: 120,
        align: 'center'
    },
    {
        title: '告警名称',
        dataIndex: 'name',
        key: 'name'
    },
    {
        title: '告警英文名',
        dataIndex: 'nameEs',
        key: 'nameEs'
    },
    {
        title: '报警开始时间',
        dataIndex: 'beginTime',
        key: 'beginTime',
        width: 200,
        align: 'center'
    },
    {
        title: '报警结束时间',
        dataIndex: 'endTime',
        key: 'endTime',
        width: 200,
        align: 'center'
    }
]

const onDownload = () => {
    download(params)
}
</script>
